<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="{{ asset('javascript/jquery/jquery-2.1.1.min.js') }}" type="text/javascript"></script>
  <script src="{{ asset('javascript/bootstrap/js/bootstrap.min.js') }}" type="text/javascript"></script>
  <script src="{{ asset('javascript/layer/layer.js') }}" type="text/javascript"></script>
  <script src="{{ asset('javascript/vue/vue.js') }}" type="text/javascript"></script>
  <script src="{{ asset('javascript/element/js.js') }}" type="text/javascript"></script>
  <link href="{{ asset('javascript/element/css.css') }}" rel="stylesheet" type="text/css"/>
  <link href="{{ asset('javascript/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css"/>
  <link href="{{ asset('css/repair.css') }}" rel="stylesheet" type="text/css"/>
  <link href="{{ asset('resources/imgs/favicon.ico') }}" rel="icon">
  <title>{{ $type_text }}</title>
</head>
<body>
<div id="app" class="container">
  <div class="title">{{ $head_title }}</div>
  <div id="event-img-section" class="items">
    <div class="head-section">
      <el-upload
          class="event-attachment"
          action="{{ env('app_url') }}/files/filesStore"
          name="attachment"
          accept=".png,.jpg,.jpeg"
          multiple
          :on-success="uploadSuccess"
          :on-progress="uploadProcess"
          :show-file-list=false
      >
        <span>{{ $img_title }}</span>
        <el-button size="small" type="text">
          <img src="{{ asset('resources/imgs/attachment.png') }}" class="btn-img" alt="">
        </el-button>
      </el-upload>
    </div>
    <div id="event-img-content">
      <div
          v-if="images"
          v-for="(image, index) in images"
          :key="index"
          class="ei-items"
      >
        <div class="image">
          <img :src="image.url">
        </div>
        <div class="intro">
          <p class="intro-title">${ image.title }</p>
          <p class="intro-size">${ image.size }</p>
        </div>
        <div class="action">
          <span @click="removeAttachment(index)">x</span>
        </div>
      </div>
      <p v-if="images.length == 0" style="text-align: center; font-size: 12px;">{{ $no_image }}</p>
    </div>
  </div>
  <div id="event-comment-section" class="items">
    <div class="head-section">{{ $desc_title }}</div>
    <div id="event-comment-content" style="margin-top: 10px;">
      <el-input type="textarea" v-model="description" rows="4" placeholder="请输入" resize="none"></el-input>
    </div>
  </div>
  <div class="title">客户信息</div>
  <div class="items cus-info">
    <div class="head-section">客户名称</div>
    <div id="event-comment-content" style="margin-top: 10px;">
      {{ $product->customer->name ?? '' }}
    </div>
  </div>
  <div class="items cus-info">
    <div class="head-section">联系人</div>
    <div id="event-comment-content" style="margin-top: 10px;">
      <el-input v-model="contact_name" placeholder="请输入联系人" :clearable="true" size="small"></el-input>
    </div>
  </div>
  <div class="items cus-info">
    <div class="head-section">电话</div>
    <div id="event-comment-content" style="margin-top: 10px;">
      <el-input v-model="contact_telephone" placeholder="请输入电话" :clearable="true" size="small"></el-input>
    </div>
  </div>
  <div class="items cus-info">
    <div class="head-section">地址</div>
    <div id="event-comment-content" style="margin-top: 10px;">
      <el-input v-model="address" placeholder="请输入地址" :clearable="true" size="small"></el-input>
    </div>
  </div>
  <div class="btn-submit">
    <el-button @click="submit">提交</el-button>
  </div>
</div>
</body>
<script type="text/javascript">
  let app = new Vue({
    el: '#app',
    delimiters: ['${', '}'],
    data: {
      images: [],
      imgs: [],
      description: '',
      contact_name: '{{ $product->customer->user->name ?? "" }}',
      contact_telephone: '{{ $product->customer->user->phone ?? $account }}',
      address: '{{ $product->customer->user->detail_address ?? "" }}',
    },
    methods: {
      uploadProcess() {
        layer.load(1, {
          shade: [0.1,'#000']
        });
      },
      uploadSuccess(r) {
        console.log(r)
        layer.closeAll()
        if (r.code == -1) {
          layer.msg(r.msg);
          return false;
        }
        this.images.push({url: r.data.url, title: r.data.name, size: r.data.size})
        this.imgs.push(r.data.path)
      },
      removeAttachment(index) {
        let that = this
        let confirm = layer.confirm('确定要删除吗?', {
          btn: ['确定','取消']
        }, function(){
          that.imgs.splice(index, 1)
          that.images.splice(index, 1)
          layer.close(confirm)
        }, function(){
          layer.close(confirm)
        });
        console.log(index)
      },
      submit() {
        let description = this.description
        let imgs = this.imgs
        if (!description && !imgs.length) {
          layer.msg('图片和描述不能同时为空')
          return false
        }
        let contactName = this.contact_name.replace(/\s/gi, '');
        if (!contactName) {
          layer.msg('请输入联系人信息')
          return false
        }
        let contactPhone = this.contact_telephone.replace(/\s/gi, '');
        if (!contactPhone) {
          layer.msg('请输入联系人电话')
          return false
        }
        let address = this.address.replace(/\s/gi, '');
        if (!address) {
          layer.msg('请输入地址信息')
          return false
        }
        let type = '{{ $type }}';
        let qrCodeId = '{{ $qrcode_id }}'
        let data = {
          "_token": "{{ csrf_token() }}",
          "description": description,
          "imgs": imgs,
          "type": type,
          "contact_name": contactName,
          "contact_telephone": contactPhone,
          "address": address,
          "qrcode_id": qrCodeId
        };
        let loadIndex = layer.load(1, {
          shade: [0.1,'#000']
        });
        $.ajax({
          url: '{{ env('APP_URL') }}/qrcode/store',
          type: 'post',
          data: data,
          dataType: 'json',
          success: function(r) {
            layer.close(loadIndex)
            layer.msg('提交成功，我们会尽快处理', { time: 3000 }, function() {
              window.location = '/qrcode?qrcode_id={{ $qrcode_id }}';
            })
          },
          error: function (e) {
            layer.close(loadIndex)
            layer.msg(e.responseJSON.message)
          }
        });
      }
    }
  });

  function showErrorMessage(message) {
    layer.open({
      type: 1,
      title: false,
      closeBtn: 0,
      skin: 'prop-no-product',
      shadeClose: false,
      content: message
    })
  }

  @if(empty($qrcode))
  showErrorMessage('二维码信息错误')
  @elseif(empty($product))
  showErrorMessage('二维码没有绑定商品')
  @endif
</script>
</html>